<script lang="ts" setup>
import { ref } from 'vue'
const msg = ref('');
const message = ref(['你好，我是果汁分你一半的小助手，有什么可以帮助您？']);


function sendClick() {
    message.value.push(msg.value)
    msg.value = ''
}

</script>



<template>
    <div>
        <div class="message-chat">
            <header class="message-chat-header">
                <div class="back" @click="$router.back()" style="margin-left:15px; margin-top: 30px;">
                    <svg t="1731383206890" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2340" width="18" height="18">
                        <path
                            d="M733.090909 977.454545a23.202909 23.202909 0 0 1-16.453818-6.818909l-442.181818-442.158545a23.202909 23.202909 0 0 1 0-32.907636l442.181818-442.205091a23.249455 23.249455 0 1 1 32.907636 32.907636L323.816727 512.023273l425.728 425.704727A23.249455 23.249455 0 0 1 733.090909 977.454545z"
                            fill="" p-id="2341"></path>
                    </svg>
                    <span style="font-size: 16px; color: #000; margin-left: 110px; font-weight: bold;">果汁分你一半</span>
                </div>
            </header>
            <main class="message-chat-main">
                <div style="width: 100%;height: 60px; display: flex;  align-items: center;" v-for="item in message"
                    class="message-chat-item">
                    <div
                        style="width:60%;height: 100%;display: flex; flex-wrap: wrap; justify-content:end; align-items: center;margin-right: 10px;margin-top: 20px; ">
                        <span>{{ item }}</span>
                    </div>

                    <div>
                        <van-image
                            src="https://cdn7.axureshop.com/demo2024/2251242/images/%E7%A7%81%E4%BF%A1%E8%AF%A6%E6%83%85/u2461.svg"></van-image>
                    </div>

                </div>
            </main>
            <footer class="message-chat-footer">
                <input type="text" placeholder="输入消息..." v-model="msg" @keyup.enter="sendClick">
                <span style="color: #333; font-size: 16px;" @click="sendClick">发送</span>
            </footer>
        </div>
    </div>
</template>


<style scoped lang="scss">
.message-chat {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: rgba(247, 247, 247, 1);



    .message-chat-header {
        height: 60px;
        background-color: white;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }

    .message-chat-main {

        flex: 1;
        overflow: auto;
        padding-top: 60px;
        padding-bottom: 50px;

        .message-chat-item {
            width: 80%;
            height: 30px;
            margin-top: 20px;
            margin-bottom: 30px;
            display: flex;
            justify-content: end;
            align-items: center;
            box-sizing: border-box;

            span {
                width: auto;
                font-size: 16px;
                color: #000;
                background-color: rgb(0, 0, 255, 0.3);
                padding: 10px 20px;
                border-radius: 15px;
                border-top-right-radius: 0;


            }


        }

    }

    .message-chat-footer {
        width: 100%;
        height: 50px;
        background-color: white;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;

        input {
            width: 70%;
            height: 40px;
            border: none;
            border-radius: 35px;
            background-color: rgba(247, 247, 247, 1);
            padding-left: 30px;


        }
    }
}
</style>